<!--地图-->
<script setup name="myMap">
	import {
		ref,
		onMounted,
		defineAsyncComponent
	} from "vue"
	import AMap from '@/utils/map.js';
	import {
		colorMap,
		findMapColor
	} from '@/utils/globalDictionary';
	import {
		showValue
	} from '@/utils';

	const CheckSelect = defineAsyncComponent(() => import('./CheckSelect.vue'));
	const checkSelectRef = ref()

	const dialogData = ref([]);
	const showBottom = ref(false);
	let myMap = null;

	const initMap = () => {
		myMap = new AMap({
			options: {
				editable: true
			}
		});
		myMap.tileLayer();
	};

	onMounted(() => {
		initMap();

	});

	const filterChange = (data) => {

		console.log(data, "--===,执行了")
		myMap.clearMarkers();
		myMap.clearPolygons();
		myMap.clearPolylines();
		data.forEach((item, i) => {
			const type = {
				type: item.type,
				itemType: item.itemType,
			};
			if (!item?.gps) {
				if (!!item.latitude && !!item.longitude) {
					const marker = myMap.addMarker(item.latitude, item.longitude, {});
					regionPopup(item, marker);
				}
				return
			}
			const gps = item.gps?.gis;
			if (!(!!gps && gps.length > 0)) {
				return;
			}
			//0点 1线 2面
			if (item.gps.shap === 0) {
				gps.forEach((j) => {
					const pointList = JSON.parse(j.point);
					pointList.forEach((k) => {
						const marker = myMap.addMarker(k[1], k[0], {});
						// 点击事件
						regionPopup(item, marker);
					});
				});
			} else if (item.gps.shap === 1) {
				gps.forEach((j) => {
					const lineList = JSON.parse(j.line).map((k) => {
						return [k[1], k[0]];
					});
					const polyline = myMap.addPolyline(lineList, {
						color: findMapColor(colorMap, type), // 线条颜色
						weight: 3, // 线宽
					});
					// 点击事件
					regionPopup(item, polyline);
				});
			} else if (item.gps.shap === 2) {
				gps.forEach((j) => {
					let outer = []; //外层
					let outerList = [];
					let inner = [];
					let innerList = [];
					if (!!j.outer) {
						outer = JSON.parse(j.outer);
						outerList = outer.map((k) => {
							return [k[1], k[0]];
						});
					}
					if (!!j.inner) {
						inner = JSON.parse(j.inner);
						innerList = inner.map((k) => {
							const list = k
								.map((n) => {
									return [n[1], n[0]];
								})
								.reverse();
							return list;
						});
					}

					const polygon = myMap.addPolygon([outerList, ...innerList], {
						color: findMapColor(colorMap, type),
						fillColor: findMapColor(colorMap, type),
						fillOpacity: 0.5,
					});
					// 点击事件
					regionPopup(item, polygon);
				});
			}
		});
	};

	function regionPopup(item, region) {
		region.on('click', (e) => {
			if (item.type === '1') {
				// 水源地
				if (item.itemType === '1' || item.itemType === '2') {
					// 水库或山塘
					dialogData.value = [{
							label: '名称',
							value: showValue(item?.name)
						},
						{
							label: '类别',
							value: showValue(item?.waterSourceCategory.label)
						},
						{
							label: '总库容',
							value: `${showValue(item?.storage)} 万m³`
						},
						{
							label: '实时库容',
							value: `${showValue(item?.realTimeStorage)} 万m³`
						},
						{
							label: '实时水位',
							value: `${showValue(item?.realTimeWaterLevel)} m`
						}
					];
				} else if (item.itemType === '3') {
					// 其它
					dialogData.value = [{
							label: '名称',
							value: showValue(item?.name)
						},
						{
							label: '类别',
							value: showValue(item?.waterSourceCategory.label)
						},
						{
							label: '总库容',
							value: `${showValue(item?.storage)} 万m³`
						}
					];
				}
			} else if (item.type === '2') {
				// 渠系、渠首建筑物
				if (item.itemType === '0') {
					// 水闸
					dialogData.value = [{
							label: '名称',
							value: showValue(item?.name)
						},
						{
							label: '水闸类别',
							value: showValue(item?.waterGatePumpCategory?.label)
						},
						{
							label: '功能',
							value: showValue(item?.function)
						},
						{
							label: '闸门宽度',
							value: `${showValue(item?.gateWidth)} m`
						},
						{
							label: '设计流量',
							value: `${showValue(item?.designFlow)} m³/s`
						}
					];
				} else if (item.itemType === '3') {
					// 泵站
					dialogData.value = [{
							label: '名称',
							value: showValue(item?.name)
						},
						{
							label: '泵站类别',
							value: showValue(item?.waterGatePumpCategory?.label)
						},
						{
							label: '功能',
							value: showValue(item?.function)
						},
						{
							label: '设计流量',
							value: `${showValue(item?.designFlow)} m³/s`
						}
					];
				} else if (item.itemType === '5') {
					// 其它
					dialogData.value = [{
						label: '名称',
						value: showValue(item?.name)
					}];
				}
			} else if (item.type === '3') {
				// 监测站点
				if (item.itemType === '水位') {
					// 水位站
					dialogData.value = [{
							label: '名称',
							value: showValue(item?.name)
						},
						{
							label: '所属工程',
							value: showValue(item?.projectItemName)
						},
						{
							label: '当前水位',
							value: showValue(item?.realTimeWaterLevel)
						},
						{
							label: '监测状态',
							value: showValue(item?.monitorState)
						}
					];
				} else if (item.itemType === '雨量') {
					// 雨量站
					dialogData.value = [{
							label: '名称',
							value: showValue(item?.name)
						},
						{
							label: '所属工程',
							value: showValue(item?.projectItemName)
						},
						{
							label: '24h雨量',
							value: showValue(item?.rainfall24h) + 'mm'
						},
						{
							label: '监测状态',
							value: showValue(item?.monitorState)
						}
					];
				} else if (item.itemType === '流量') {
					// 流量监测点
					dialogData.value = [{
							label: '名称',
							value: showValue(item?.name)
						},
						{
							label: '所属工程',
							value: showValue(item?.projectItemName)
						},
						{
							label: '瞬时流量',
							value: showValue(item?.instantFlow)
						},
						{
							label: '监测状态',
							value: showValue(item?.monitorState)
						}
					];
				} else if (item.itemType === '水质') {
					// 水质监测点
					dialogData.value = [{
							label: '名称',
							value: showValue(item?.name)
						},
						{
							label: '所属工程',
							value: showValue(item?.projectItemName)
						},
						{
							label: '实时水质',
							value: showValue(item?.realTimeWaterQuality)
						},
						{
							label: '监测状态',
							value: showValue(item?.monitorState)
						}
					];
				} else if (item.itemType === '墒情') {
					// 墒情监测点
					dialogData.value = [{
							label: '名称',
							value: showValue(item?.name)
						},
						{
							label: '所属工程',
							value: showValue(item?.projectItemName)
						},
						{
							label: '10cm湿度',
							value: showValue(item?.soilMoisture10cm)
						},
						{
							label: '20cm湿度',
							value: showValue(item?.soilMoisture20cm)
						},
						{
							label: '监测状态',
							value: showValue(item?.monitorState)
						}
					];
				} else if (item.itemType === '视频') {
					// 视频监测点
					dialogData.value = [{
							label: '名称',
							value: showValue(item?.name)
						},
						{
							label: '所属工程',
							value: showValue(item?.projectItemName)
						},
						{
							label: '监测状态',
							value: showValue(item?.monitorState)
						}
					];
				}
			} else if (item.type === '4') {
				// 安全监测点
				dialogData.value = [{
						label: '名称',
						value: showValue(item?.name)
					},
					{
						label: '所属工程',
						value: showValue(item?.projectItemName)
					},
					{
						label: '监测数值',
						value: showValue(item?.monitorValue)
					},
					{
						label: '监测状态',
						value: showValue(item?.monitorState)
					}
				];
			} else if (item.type === '5') {
				// 渠道
				dialogData.value = [{
						label: '名称',
						value: showValue(item?.name)
					},
					{
						label: '渠道编号',
						value: showValue(item?.projectNo)
					},
					{
						label: '渠道类别',
						value: showValue(item?.channelCategory.label)
					},
					{
						label: '渠道长度',
						value: showValue(item?.length)
					},
					{
						label: '设计流量',
						value: `${showValue(item?.designFlow)} m³/s`
					},
					{
						label: '灌溉范围',
						value: `${showValue(item?.range)} 亩`
					},
					{
						label: '灌溉能力系数',
						value: showValue(item?.abilityCoefficient)
					}
				];
			} else if (item.type === '6') {
				// 灌片
				dialogData.value = [{
						label: '名称',
						value: showValue(item?.name)
					},
					{
						label: '灌片编号',
						value: showValue(item?.projectNo)
					},
					{
						label: '所属乡镇',
						value: showValue(item?.townName)
					},
					{
						label: '灌溉面积',
						value: `${showValue(item?.areaCount)} 亩`
					},
					{
						label: '主要作物',
						value: showValue(item?.stapleCrop)
					}
				];
			}
			showBottom.value = true


		});
	}
	const onClick = () => {
		checkSelectRef.value.openPop()
	}
	const onOffsetChange = (offset) => {};
</script>

<template>
	<view class="absolute wh-full z-10">
		<view id="map" class="hj-map-leaflet"></view>
		<van-floating-bubble icon="wap-nav" axis="xy" magnetic="x" @offset-change="onOffsetChange" @click="onClick" />
		<CheckSelect @filterChange="filterChange" ref='checkSelectRef'></CheckSelect>
		<van-popup v-model:show="showBottom" round position="bottom"
			style="{ max-height: calc(100% - 100rpx);min-height:20%; }">
			<view class="list-p">
				<view v-for="(item,index) in dialogData" :key="index"
					class="flex-between gap-10 list-p fz-28 text-color-2  btm-hr">
					<view>{{item.label}}</view>
					<view class="flex-1 text-right text-color-1"> <van-text-ellipsis :content="item.value.toString()"
							expand-text="展开" collapse-text="收起" /></view>

				</view>
			</view>

		</van-popup>
	</view>
</template>

<style scoped lang="scss">
	.list-p .btm-hr:not(:last-child) {
		/* 你的样式，例如： */
		border-bottom: 1px solid #EBEDF0;
	}

	#map {
		width: 100%;
		height: 100%;
	}

	/* 弹窗容器的样式 */
	:deep(.leaflet-popup) {
		#my-btn {
			color: #0057b7;
			cursor: pointer;
		}

		#my-btn:hover {
			color: #0057b7cc;
		}

		.leaflet-popup-content-wrapper {
			border-radius: 2rpx;
			/* 圆角 */
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
			/* 可选：加点阴影更美观 */
			background: rgba(147, 210, 243, 0.56);
			border: 2rpx solid rgb(117, 249, 253);
			color: black;
		}

		/* 小箭头的颜色（与背景保持一致） */
		.leaflet-popup-tip {
			background-color: rgb(117, 249, 253);
		}

		/* 内容区域样式 */
		.leaflet-popup-content {
			margin: 8rpx 12rpx;
		}

		/* 隐藏关闭按钮（如果还有） */
		.leaflet-popup-close-button {
			display: none;
		}
	}
</style>